<script>
import BorderBox from '../../components/xinke/BorderBox.vue'

export default {
  components: { BorderBox },
  props: ['errors'],
  data() {
    return {
      errorWords: [],
      matchDetectionWords: [],
      toBeVerifiedWords: [],
      sensitiveWords: [],
      nounConsistencyWords: []
    }
  },
  watch: {
    'errors': {
      immediate: true,
      handler: function(newVal) {
        this.errorWords = newVal
      }
    }
  }
}
</script>

<template>
  <div class='right-content-prompt-container'>
    <div style='font-size: 18px;font-weight: 600;'>校验结果</div>
    <div style='display: flex;align-items: center;flex-direction:row;justify-content: center;height: 48px;border-radius: 12px;
background-color: #eef2f6;font-weight: 600;margin-top: 12px;margin-bottom: 12px'>
      <span>共发现</span>
      <span style='color: red;margin: 0 2px'>{{ errorWords.length }}</span>
      <span>条疑似问题</span>
    </div>
    <!--      <div style='display: flex;flex-direction: row;align-items: center'>-->
    <!--        <span style='font-weight: 500;'>字词搭配检测</span>-->
    <!--        <span class='span-grey'>涉及</span>-->
    <!--        <span style='color:red;'>{{ matchDetectionWords.length }}</span>-->
    <!--        <span class='span-grey'>项</span>-->
    <!--      </div>-->
    <div class='word-container' v-for='(word,index) in errorWords' :key="index + 'errorWords'">
      <div class='left'>
        <div style='display: flex;flex-direction: row;align-items: center;font-weight: 800'>
          <span style='color: #fa8c16;padding: 0 5px'>{{ word.errMsg }}</span>
        
        </div>
        <div style='display: flex;flex-direction: row;align-items: center;font-weight: 300'>
          <span style='color: red;padding: 0 5px'>{{ word.errWord }}</span>
          <span style='margin: 0 2px'>建议替换成</span>
          <span style='color: #0c8fcf;padding: 0 5px'>{{ word.corWord }}</span>
        </div>
        <!-- <span style='margin-left: auto;font-size: 12px;margin-top: 5px'>
            {{ word.errMsg }}
          </span> -->
      </div>
      <!--        <div class='line'></div>-->
      <!--        <div class='right'>-->

      <!--        </div>-->
    </div>
  </div>
</template>

<style scoped lang='less'>
.right-content-prompt-container {
  width: 100%;
  border-radius: 8px;
  box-shadow: 1px 2px 8px 3px #ededed;;
  padding: 10px;
  margin: 5px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.span-grey {
  color: rgb(0, 0, 0, 0.2);
}

.word-container {
  padding: 8px;
  border-radius: 12px;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: row;
  margin-bottom: 12px;

  .left {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 0;
  }

  .line {
    width: 1px;
    padding: 12px 0;
    margin-left: auto;
    margin-right: 2px;
  }

  .right {
    display: flex;
    flex-direction: column;
  }
}
</style>